import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'

import Modal from './Modal/'
import ModalTitle from './Modal/ModalTitle'
import Flex from '../components/Flex'
import Button from '../components/Button'
import Color from '../components/Color'
import ProjectList from './ProjectList.js'

import Icon from '../components/Icon'
import Svg from '../components/Icon/svg.js'

import IconClose from '../components/Icon/close.svg'
import IconSearch from '../components/Icon/search.svg'
import IconSave from '../components/Icon/save.svg'
import IconPublish from '../components/Icon/publish.svg'
import IconProject from '../components/Icon/project.svg'
import IconLoading from '../components/Icon/loading.svg'

import { RotateIcon } from './common/'

import * as actions from '../actionTypes/'

const indexMap = {
    all: 'all',
    unpublish: 'unpublish',
    publish: 'publish',
}

const objTypes = {
    all: {
        text: '全部作品',
        icon: IconProject,
        status: '',
    },
    unpublish: {
        text: '未发布',
        icon: IconSave,
        status: 'S',
    },
    publish: {
        text: '已发布',
        icon: IconPublish,
        status: 'P',
    },
}

class CustomModal extends React.Component {
    state = {
        index: 'all',
        query: '',
    }

    main = null

    componentDidMount() {
        this.handleInitLoad('all')
        this.handleInitLoad('unpublish')
        this.handleInitLoad('publish')
    }

    handleInitLoad(listType, currentPage, isSearch) {
        const { query } = this.state
        this.props.dispatch({
            type: actions.LOAD_PROJECT_LIST,
            payload: {
                size: 20,
                currentPage: currentPage || 1,
                status: objTypes[listType].status,
                projectName: query,
            },
            listType,
            isSearch,
        })
    }

    handleScroll(e) {
        const { index } = this.state
        const project = this.props.project[indexMap[index]]
        const { isLoadingProject } = this.props.project
        if (isLoadingProject) {
            return
        }
        const { scrollTop, scrollHeight, clientHeight } = e.target
        if (scrollHeight - clientHeight - scrollTop < 50) {
            if (project.currentPage < project.totalPage) {
                this.handleInitLoad(index, project.currentPage + 1)
            } else {
                console.log('已经是最后一页')
            }
        }
    }

    changeTab(index) {
        this.setState({
            index,
        })

        this.props.dispatch({
            type: '',
        })
    }

    handleClickItem(item) {
        this.props.dispatch({
            type: actions.GET_PROJECT_DATAURL,
            payload: item,
        })
    }

    handleClose() {
        this.props.dispatch({
            type: actions.TOGGLE_PROJECT_MODAL,
            payload: false,
        })
    }

    onChange(e) {
        this.setState({
            query: e.target.value,
        })
    }

    handleSearch() {
        const { index } = this.state
        this.handleInitLoad(index, 1, true)
    }

    onKeyUp(e) {
        if (e.keyCode === 13) {
            this.handleSearch()
        }
    }

    renderTabButton(type) {
        const { index } = this.state
        const setActiveColor = active => (active ? Color.lightBlue : Color.gray)
        return (
            <TabButton
                index={type}
                onClick={this.changeTab.bind(this, type)}
                active={index === type}
            >
                <Svg
                    size={18}
                    src={objTypes[type].icon}
                    color={setActiveColor(index === type)}
                />
                &nbsp;{objTypes[type].text}
            </TabButton>
        )
    }

    render() {
        const { index, query } = this.state
        const { isLoadingProject } = this.props.project
        const list = this.props.project[indexMap[index]]
        return (
            <Modal isOpen={true}>
                <Container column>
                    <ModalTitleNoBg align="center">
                        <Title align="center" justify="space-between">
                            <TabWrap align="center">
                                {this.renderTabButton('all')}
                                {this.renderTabButton('unpublish')}
                                {this.renderTabButton('publish')}
                            </TabWrap>
                            <Right justify="flex-end" align="center">
                                <FixedIcon
                                    size={26}
                                    src={IconSearch}
                                    onClick={this.handleSearch.bind(this)}
                                />
                                <Input
                                    placeholder="搜索"
                                    value={query}
                                    onChange={this.onChange.bind(this)}
                                    onKeyUp={this.onKeyUp.bind(this)}
                                />
                                <Svg
                                    size={20}
                                    src={IconClose}
                                    color={Color.gray}
                                    onClick={this.handleClose.bind(this)}
                                />
                            </Right>
                        </Title>
                    </ModalTitleNoBg>
                    <Main auto onScroll={this.handleScroll.bind(this)}>
                        {isLoadingProject && (
                            <Loading auto center>
                                <RotateIcon
                                    color={Color.gray}
                                    src={IconLoading}
                                    size={100}
                                />
                            </Loading>
                        )}
                        <ProjectList
                            list={list.list || []}
                            handleClickItem={this.handleClickItem.bind(this)}
                        />
                    </Main>
                </Container>
            </Modal>
        )
    }
}

export default connect(state => state)(CustomModal)

const ModalTitleNoBg = styled(ModalTitle)`
    background: #fff;
    border-bottom: 1px solid #ccc;
`

const Title = styled(Flex)`
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
`

const indexMargin = {
    all: 10,
    unpublish: 5,
    publish: 0,
}

const TabWrap = styled(Flex)`
    position: relative;
`

const Loading = styled(Flex)`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
`

const TabButton = styled(Button)`
    min-width: 120px;
    color: ${({ active }) => (active ? '#6347FE' : Color.gray)};
    transition: all 0.5s;
    display: flex;
    align-items: center;
    &:after {
        position: absolute;
        background: #6347fe;
        content: '';
        width: ${({ active }) => (active ? '70px' : '0px')};
        height: 2px;
        margin-left: ${({ index }) => indexMargin[index] + 'px'};
        top: 47px;
        transition: all 0.5s;
    }
`

const Container = styled(Flex)`
    width: 930px;
    min-height: 696px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
`

const Main = styled(Flex).attrs({
    id: 'main',
})`
    padding: 30px;
    padding-top: 10px;
    height: 590px;
    overflow-y: auto;
`
const Input = styled('input')`
    width: 162px;
    height: 36px;
    border: 1px solid #eee;
    border-radius: 36px;
    margin-right: 50px;
    padding-left: 30px;
    color: #ccc;
    font-size: 16px;
`

const FixedIcon = styled(Icon)`
    position: absolute;
    top: 8px;
    left: 3px;
`

const Right = styled(Flex)`
    width: 260px;
    position: relative;
`



// WEBPACK FOOTER //
// ./src/containers/ProjectModal.js